const $siteList = $('.siteList')
const $lastLi = $('.siteList').find('.last')
const x = localStorage.getItem('x') //获取保存的内容
const xObject = JSON.parse(x) //将字符串变成对象
const hashMap = xObject ? xObject : [ //因为初始的x是一个空值，所以要这样
    //parcel会默认在所有代码外加一个作用域，所以不会变成一个全局变量
    { logo: 'https://gitee.com/favicon.ico', logoType: 'text', url: "https://gitee.com/" },
    { logo: 'https://www.iconfont.cn/favicon.ico', logoType: 'text', url: "https://www.iconfont.cn/" }
]

simplifyUrl = (url) => {
    return url.replace('https://', '')  //replace返回的是被替换的值，可以链式操作
        .replace('http://', '')
        .replace('www.', '')
        .replace(/\/.*/, '')  //正则表达式，删除/及/后面的内容
}

$('.searchForm').on('keypress', (e) => {
    e.stopPropagation() //在输入框的时候阻止冒泡
})



render = () => {
    $siteList.find('li:not(.last)').remove() //find('li:not(.last)')除了类名为last的，其他的li都找出来
    hashMap.forEach((node, index) => {//一般内联元素不能包住块级元素，但是a标签可以，它是特殊的
        const $li = $(`
        <li> 
                        <div class="site">
                            <img class = "logo" src = "${node.logo}" alt="网站图标"/>
                            <div class="link">${simplifyUrl(node.url)}</div>
                            <div class='close'>
                            <svg class="icon">
                                <use xlink:href="#icon-delete"></use>
                            </svg>
                        </div>
                        </div>
        </li>
        `).insertBefore($lastLi)
        $li.on('click', () => {
            window.open(node.url)
        })
        $li.on('click', '.close', (e) => {
            e.stopPropagation() //阻止冒泡
            hashMap.splice(index, 1)
            const string = JSON.stringify(hashMap)  //把对象变成字符串，因为localStorage只能存字符串
            localStorage.setItem('x', string)
            render()
        })
    })
}
render()
//添加网站收藏
$('.addButton')
    .on('click', () => {
        let isRepetition = false
        let url = window.prompt('请输入要添加的网址，以http或https开头', 'https://')
        if (url.indexOf('http') != 0) { //判断用户输入的是不是http开头
            url = 'https://' + url
        }
        if (!simplifyUrl(url)) { 
            window.alert('请输入网址')
            return }
        hashMap.forEach(node => {
            console.log(node.url)
            console.log(url)
            if (simplifyUrl(node.url) === simplifyUrl(url)) {
                window.alert('请勿重复添加')
                isRepetition = true
                console.log(isRepetition)
            }
        })
        if (!isRepetition) {
            hashMap.push({
                logo: url + '/favicon.ico',
                logoType: 'text',
                url: url
            })
            render()
            const string = JSON.stringify(hashMap)  //把对象变成字符串，因为localStorage只能存字符串
            localStorage.setItem('x', string)
        }

    })

$(document).ready(function () {  //页面加载完成时（在DOM完全就绪时就可调用）
    $("table tr:nth-child(even)").addClass("even");
    document.getElementById("load").style.display = "none";
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        document.getElementById("load").style.display = "block";
        window.alert('请使用浏览器打开，以保证浏览效果')
        return true;
    } else {
        return false;
    }
});